<!-- 添加待办事项 页面 -->
<template>
	<view class="add-to-do-item-box">
		<!-- 顶部案件信息 -->
		<view class="case-box" @click="caseItemClick">
			<view class="case-name">
				<view>
					案件
					<text style="margin-left: 36rpx">{{ formData.case_item.cause || formData.case_item.lawyer_cause || '请选择' }}</text>
				</view>
				<u-icon name="arrow-right" size="25" color="#97979F"></u-icon>
			</view>
			<view class="">
				原告
				<text style="margin-left: 36rpx">{{ formData.case_item.plaintiff_name || '请选择' }}</text>
			</view>
			<view class="">
				被告
				<text style="margin-left: 36rpx">{{ formData.case_item.defendant_name || '请选择' }}</text>
			</view>
		</view>

		<!-- 添加待办事项场景下展示 提醒类型和提醒时间 -->
		<block v-if="isToDoList">
			<view class="tip-type" @click="tipTypeShow = true">
				<view class="">提醒类型</view>
				<view class="">
					{{ formData.tip_type }}
					<u-select v-model="tipTypeShow" :list="tipTypeList" @confirm="selectTipType"></u-select>
				</view>
				<view class="icon"><u-icon name="arrow-right" size="25" color="#97979F"></u-icon></view>
			</view>
			<view class="tip-type" style="margin: 0" @click="tipTimeShow = true">
				<view class="">提醒时间</view>
				<view class="">
					{{ formData.tip_time }}
					<u-picker v-model="tipTimeShow" mode="time" :default-time="start_time" :params="params" @confirm="selectTipTime"></u-picker>
				</view>
				<view class="icon"><u-icon name="arrow-right" size="25" color="#97979F"></u-icon></view>
			</view>
		</block>
		<!-- 添加待开庭场景下展示 阶段、开庭时间和开庭地址 -->
		<block v-else>
			<view class="tip-type" @click="stageShow = true">
				<view class="">阶段</view>
				<view class="">
					{{ formData.stage }}
					<u-select v-model="stageShow" :list="stageList" @confirm="selectStage"></u-select>
				</view>
				<view class="icon"><u-icon name="arrow-right" size="25" color="#97979F"></u-icon></view>
			</view>
			<view class="tip-type" style="margin: 0" @click="tipTimeShow = true">
				<view class="">开庭时间</view>
				<view class="">
					{{ formData.opening_time }}
					<u-picker v-model="tipTimeShow" mode="time" :params="params" :default-time="start_time" @confirm="selectOpeningTime"></u-picker>
				</view>
				<view class="icon"><u-icon name="arrow-right" size="25" color="#97979F"></u-icon></view>
			</view>
			<view class="tip-type" style="margin: 0">
				<view class="">开庭地址</view>
				<view class="input-box"><u-input v-model="formData.opening_address" type="text" placeholder="请输入" :custom-style="inputStyle" :clearable="false" /></view>
			</view>
		</block>
		<!-- 输入文本区域 -->
		<view class="input-content-box">
			<view class="title">内容描述</view>
			<view class="input-box"><u-input placeholder="请输入..." :clearable="false" v-model="formData.content" type="textarea" :auto-height="true" /></view>
		</view>

		<!-- 上传文件区域 -->
		<view class="input-content-box">
			<view class="title">添加图片</view>
			<!-- <view class="file-list-box" v-for="(data, index) in uploadFlieList" :key="index">{{data}}</view>
			<view class="upload-file" @click="uploadFileClick">选择文件</view> -->
			<view class="upload-box">
				<view class="file-list" v-for="(url, index) in uploadFlieList" :key="index">
					<u-image width="116" height="116" :src="url"></u-image>
					<view class="icon-box" @click.stop="cancelImgItem(index)"><u-icon name="close" color="#FFF" size="18"></u-icon></view>
				</view>
				<view class="add-file" @click="uploadFile"><u-icon name="plus" color="#CCCCCC" size="56"></u-icon></view>
			</view>
		</view>

		<!-- 底部保存按钮 -->
		<bottom-btn :text="id ? '提交修改' : '保存'" @click="submitClick"></bottom-btn>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 如果用户是从“添加待开庭”进入则此值为 false，从“添加待办事项”进入则此值为 true
			isToDoList: false,
			// 事项 id 如果来源页传递了此值过来则表示此次操作为修改不是添加
			id: null,
			// 添加 待开庭/待办事项 表单数据对象
			formData: {
				// 案件信息对象，来源于 “添加案件” 页面，此页面主动跳转到该页面进行选择
				case_item: {}, // 此字段两个场景均不能为空，为始终必选项
				tip_type: '请选择', // 提醒类型 此项为添加 待办事项 时必填
				tip_time: '请选择', // 提醒时间 此项为添加 待办事项 时必填

				stage: '请选择', // 此项为添加 待开庭 时必填，值为：阶段
				opening_time: '请选择', // 此项为添加 待开庭 时必填，值为：开庭时间
				opening_address: '', // 此项为添加 待开庭 时必填，值为：开庭地址

				content: '', // 此字段目前为始终可选项
				photo_url: [] // 上传的图片路径列表
			},
			tipTypeShow: false,
			tipTypeValue: 0, // 后续用于校验页面数据是否复合提交条件
			tipTimeShow: false,
			start_time: '', // 开庭时间 YYYYMMDD H:I:S格式，主要用于后台提交

			stageShow: false,
			stageValue: 0, // 开庭阶段value值
			// 开庭地址输入框的样式
			inputStyle: {
				width: '100%',
				height: '100%',
				textAlign: 'right',
				fontSize: '30rpx',
				fontFamily: 'PingFang SC',
				fontWeight: 500,
				color: '#141418'
			},
			// 模拟待开庭阶段可选项列表数据
			stageList: [],
			// 提醒类型可选项列表数据
			tipTypeList: [
				{
					value: 1,
					label: '上诉到期'
				},
				{
					value: 2,
					label: '保全到期'
				},
				{
					value: 2,
					label: '举证到期'
				},
				{
					value: 3,
					label: '约见'
				},
				{
					value: 4,
					label: '缴费到期'
				},
				{
					value: 5,
					label: '其他类型'
				}
			],
			// 提醒时间 可选参数项，为 true 的均可选
			params: {
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: true,
				second: false
			},
			// 上传的文件列表(仅为用于显示的数据不是用于上传的数据)
			uploadFlieList: []
		};
	},
	onLoad(options) {
		this.getLawyerCauseTrial(); // 获取庭审阶段可选数据
		// console.log(options);
		// 判断用户要添加 “待开庭” 还是 “待办事项”
		if (options.isToDoList === 'true') {
			this.isToDoList = true; // 从 待办事项 进入
			// 如果来源页传递了 id 过来则表示此次操作为 编辑待办信息
			if (options.id) {
				this.id = options.id;
				uni.setNavigationBarTitle({
					title: '编辑待办信息'
				});
				// TODO:是编辑待办信息，则先调用接口获取待办事项的信息渲染到页面中
				return this.getFormData();
			}
			uni.setNavigationBarTitle({
				title: '添加待办事项'
			});
		} else {
			this.isToDoList = false; // 从 待开庭 进入
			// 如果来源页传递了 id 过来则表示此次操作为 编辑待开庭信息
			if (options.id) {
				this.id = options.id;
				uni.setNavigationBarTitle({
					title: '编辑待开庭信息'
				});
				// TODO:是编辑待开庭信息，则先调用接口获取待开庭的信息渲染到页面中
				return this.getFormData();
			}
			uni.setNavigationBarTitle({
				title: '添加待开庭'
			});
		}
		// console.log(this.isToDoList);
	},
	onShow() {
		if (!this.vuex_toDoListCase.id) return;
		// 把存储在 vuex 中的 用户选择的 案件对象赋值给 formData 中的 case_item
		this.formData.case_item = this.vuex_toDoListCase;
		// 把 vuex 中的 vuex_toDoListCase 重置为空
		this.$u.vuex('vuex_toDoListCase', {});
	},
	methods: {
		async getLawyerCauseTrial() {
			const res = await this.$u.api.getLawyerCauseTrial();
			if (!res) return;
			// console.log(res);
			for (let k in res) {
				let item = {
					value: res[k].id,
					label: res[k].name
				};
				this.stageList.push(item);
			}
			// console.log(this.stageList);
		},
		// 获取页面数据(为编辑待办信息场景时才执行)
		async getFormData() {
			if(this.isToDoList) {	// 获取待办事项数据
				const res = await this.$u.api.getTodoListItem({id: this.id})
				if(!res) return
				console.log(res);
				// 把获取到的数据填充到 formData 对象中
				this.formData.case_item = res.case_info;
				this.formData.case_item.cause = res.law_case_value;
				this.formData.case_item.id = res.law_case_id; // 案件的id
				this.formData.tip_time = this.getShowTime(res.start_time);
				this.start_time = res.start_time;
				this.formData.tip_type = res.remind;	// 提醒类型
				this.formData.content = res.content;
				this.formData.photo_url = res.files;
				this.uploadFlieList = res.files;
				return
			}
			// 获取 待开庭 数据
			const res = await this.$u.api.getHoldCourtItem({ id: this.id });
			if (!res) return;
			// 把获取到的数据填充到 formData 对象中
			this.formData.case_item = res.case_info;
			this.formData.case_item.id = res.law_case_id; // 案件的id
			this.formData.stage = res.lawyer_trial_value;
			this.stageValue = res.lawyer_trial;
			this.formData.opening_time = this.getShowTime(res.start_time);
			this.start_time = res.start_time;
			this.formData.opening_address = res.address;
			this.formData.content = res.content;
			this.formData.photo_url = res.files;
			this.uploadFlieList = res.files;
		},
		// 把后台返回的 2022-03-05 14:00:00 格式的时间转换为 2022年03月05日 14:00 的格式
		getShowTime(time) {
			let str = ''
			if(!time) return
			time = time.replace(/-/, '年').replace(/-/, '月').replace(/ /, '日 ')
			let arr = time.split(' ')
			str = arr[0] + ' ' + arr[1].split(':')[0] + ':' + arr[1].split(':')[1]
			return str
		},
		// 顶部案件 区域的点击事件(跳转到“添加案件”页面选择案件后返回回来)
		caseItemClick() {
			// 注：此处携带了一个 isToDoList 的参数为 true 则该页面知道此页面为来源页
			this.$u.route('/myPackageA/pages/views/add-case?isToDoList=true');
		},
		// 选择提醒类型确定事件
		selectTipType(arr) {
			this.tipTypeValue = arr[0].value;
			this.formData.tip_type = arr[0].label;
		},
		// 选择提醒时间确定事件
		selectTipTime(time) {
			this.start_time = `${time.year}${time.month}${time.day} ${time.hour}:${time.minute}:00`;
			this.formData.tip_time = `${time.year}年${time.month}月${time.day}日 ${time.hour}:${time.minute}`;
		},

		// 选择 待开庭 阶段 确定事件
		selectStage(arr) {
			this.stageValue = arr[0].value;
			this.formData.stage = arr[0].label;
		},
		// 选择 待开庭 开庭时间 确定事件
		selectOpeningTime(time) {
			this.start_time = `${time.year}${time.month}${time.day} ${time.hour}:${time.minute}:00`;
			this.formData.opening_time = `${time.year}年${time.month}月${time.day}日 ${time.hour}:${time.minute}`;
		},
		// 底部 保存提交 按钮的点击事件
		async submitClick() {
			// 如果 this.isToDoList 为 true 则此次提交的是 添加待办事项 内容
			if (this.isToDoList) {
				// this.id 不为空则此次操作是 编辑操作
				if (this.id) {
					let params = {
						id: this.id,
						law_case_id: this.formData.case_item.id,
						remind: this.formData.tip_type,
						start_time: this.start_time,
						content: this.formData.content,
						files: this.formData.photo_url
					};
					const res = await this.$u.api.editTodoListItem(params)
					if(!res) return
					// 编辑场景下提交后建议跳转回 待办信息 页面，在该页面的 onShow() 生命周期中刷新数据即可看到编辑后的信息
					this.$u.route({
						type: 'back'
					});
					this.$u.vuex('vuex_isSubmit', true)
					this.$u.toast('待办事项编辑成功')
					// 最后清空 this.id 的值(不然下一次添加操作也会被它影响成编辑操作)
					this.id = null;
				} else {
					// 否则此次操作为 添加操作
					// 表单校验
					if (!this.formData.case_item.id) return this.$u.toast('请选择事项所关联的案件');
					if (this.tipTypeValue === 0) return this.$u.toast('请选择提醒类型');
					if (!this.start_time) return this.$u.toast('请选择提醒时间');
					// TODO:进行后续的调用接口添加待办事项业务逻辑
					let params = {
						law_case_id: this.formData.case_item.id,
						remind: this.formData.tip_type,
						start_time: this.start_time,
						content: this.formData.content,
						files: this.formData.photo_url
					};
					const res = await this.$u.api.addTodoListItem(params);
					if (!res) return;
					// 最后添加成功后跳转回 待办事项页面
					// this.$u.route({
					// 	type: 'redirectTo', // 关闭当前页面
					// 	url: '/myPackageA/pages/views/to-do-list?isToDoList=true'
					// });
					this.$u.vuex('vuex_isSubmit', true)		// 告知返回页需要刷新数据
					this.$u.route({
						type: 'back'
					});
					this.$u.vuex('vuex_isSubmit', true)
					this.$u.toast('添加待办事项成功')
				}
			} else {
				// 这里 表示此次提交的是 待开庭 的内容
				// this.id 不为空则此次操作是 编辑操作
				if (this.id) {
					if (!this.formData.opening_address) return this.$u.toast('开庭地址不能为空');
					let params = {
						id: this.id,
						law_case_id: this.formData.case_item.id,
						lawyer_trial: this.stageValue,
						address: this.formData.opening_address,
						start_time: this.start_time,
						content: this.formData.content,
						files: this.formData.photo_url
					};
					const res = await this.$u.api.editHoldCourtItem(params);
					if (!res) return;
					this.$u.vuex('vuex_isSubmit', true); // 告诉下个页面要刷新数据
					this.$u.route({
						type: 'back'
					});
					this.$u.toast('编辑待开庭成功');
					// 最后清空 this.id 的值(不然下一次添加操作也会被它影响成编辑操作)
					this.id = null;
				} else {
					// 否则此次操作为 添加操作
					// 表单校验
					if (!this.formData.case_item.id) return this.$u.toast('请选择事项所关联的案件');
					if (this.stageValue === 0) return this.$u.toast('请选择开庭阶段');
					if (!this.start_time) return this.$u.toast('请选择开庭时间');
					if (!this.formData.opening_address) return this.$u.toast('请输入开庭地址');
					// TODO:进行后续的调用接口 添加待开庭 业务逻辑
					let params = {
						law_case_id: this.formData.case_item.id,
						lawyer_trial: this.stageValue,
						address: this.formData.opening_address,
						start_time: this.start_time,
						content: this.formData.content,
						files: this.formData.photo_url
					};
					// console.log('创建开庭所需参数', params);
					const res = await this.$u.api.createHoldCourt(params);
					if (!res) return;

					// 最后添加成功后跳转回 待开庭 页面
					// this.$u.route({
					// 	type: 'redirectTo', // 关闭当前页面
					// 	url: '/myPackageA/pages/views/to-do-list?isToDoList=false'
					// });
					this.$u.vuex('vuex_isSubmit', true)		// 告知返回页需要刷新数据
					this.$u.route({
						type: 'back'
					});
				}
			}
		},
		// 上传图片
		async uploadFile() {
			let _this = this
			if(this.formData.photo_url.length >= 9) return this.$u.toast('最多添加9张图片哦')
			uni.showLoading({
				mask: true,
				title: '上传中...'
			});
			// 1.选择图片（可以多选最多九张）
			const res = await uni.chooseImage({
				count: (9 - _this.formData.photo_url.length),		// 最多可以选择的图片张数
				sizeType: ['original'],		// original 原图，compressed 压缩图
				sourceType: ['album'],		// album 从相册选图，camera 使用相机
			});
			// console.log('res:', res);
			if (res.length < 2) {
				// 小于2则没有选择图片
				uni.hideLoading();
				return;
			}
			// console.log('选择了多张图片', res);
			var list = []
			res[1].tempFilePaths.forEach(async item => {
				 // 2.将选择的图片上传到目标服务器
				 const arr = await uni.uploadFile({
				 	// 需要上传的地址
				 	url: _this.vuex_uploadAction,	// 保存在 vuex 中的全局上传文件的服务器路径
				 	// filePath  需要上传的文件
				 	filePath: item,
				 	name: 'file',
				 	header: {
				 		token: _this.vuex_token // 挂载请求头为用户的 token
				 	}
				 });
				 // console.log(arr);
				 let data = JSON.parse(arr[1].data);
				 // console.log('data:', data);
				 if (data.code !== 1) {
					uni.hideLoading();
					that1.$u.toast(data.msg);
					return;
				}
				 list.push(data.data.fullurl);
				 // console.log('list', list);
				 // 这里直接 push 到 uploadFlieList 中，会报错，不知道为什么，所以用一个 list 中转一下数据
				 _this.uploadFlieList = [..._this.uploadFlieList, ...list]
				 _this.formData.photo_url = [... _this.formData.photo_url, ...list]
				 list = []
			 })

			 // console.log('图片列表', _this.uploadFlieList);
			uni.hideLoading();
		},
		// 删除图片按钮的点击事件
		cancelImgItem(index) {
			this.uploadFlieList.splice(index, 1)
			this.formData.photo_url.splice(index, 1)
		}
		// // 上传图片
		// async uploadFile() {
		// 	if (this.formData.photo_url.length >= 9) return this.$u.toast('最多添加9张图片哦');
		// 	uni.showLoading({
		// 		mask: true,
		// 		title: '上传中...'
		// 	});
		// 	// 1.选择图片（可以多选最多九张）
		// 	const res = await uni.chooseImage({
		// 		count: 9 - this.formData.photo_url.length, // 最多可以选择的图片张数
		// 		sizeType: ['original'], // original 原图，compressed 压缩图
		// 		sourceType: ['album'] // album 从相册选图，camera 使用相机
		// 	});
		// 	// console.log('res:', res);
		// 	if (res.length < 2) return; // 小于2则没有选择图片
		// 	// console.log('选择了多张图片', res);
		// 	var that1 = this;
		// 	res[1].tempFilePaths.forEach(async item => {
		// 		// console.log('选择了的图片的路径', item);
		// 		// 2.将选择的图片上传到目标服务器
		// 		const arr = await uni.uploadFile({
		// 			// 需要上传的地址
		// 			url: that1.vuex_uploadAction, // 保存在 vuex 中的全局上传文件的服务器路径
		// 			// filePath  需要上传的文件
		// 			filePath: item,
		// 			name: 'file',
		// 			header: {
		// 				token: that1.vuex_token // 挂载请求头为用户的 token
		// 			}
		// 		});
		// 		// console.log(arr);
		// 		let data = JSON.parse(arr[1].data);
		// 		console.log('data:', data);
		// 		if (data.code !== 1) return that1.$u.toast('上传失败，请重试');
		// 		that1.uploadFlieList.push(data.data.fullurl);
		// 		that1.formData.photo_url.push(data.data.fullurl);
		// 		// 进行一下数组去重
		// 		that1.uploadFlieList = Array.from(new Set(that1.uploadFlieList));
		// 		that1.formData.photo_url = Array.from(new Set(that1.formData.photo_url));
		// 		// console.log('图片列表', this.uploadFlieList);
		// 	});
		// 	uni.hideLoading();
		// },
		// // 删除图片按钮的点击事件
		// cancelImgItem(index) {
		// 	this.uploadFlieList.splice(index, 1);
		// 	this.formData.photo_url.splice(index, 1);
		// }
	}
};
</script>

<style lang="scss" scoped>
.add-to-do-item-box {
	width: 750rpx;
	min-height: 100vh;
	background-color: $u-bg-color;
	padding-bottom: 90rpx;
	&::before {
		content: ' ';
		display: block;
		width: 100%;
		height: 20rpx;
		background-color: $u-bg-color;
	}
	.case-box {
		height: 186rpx;
		background-color: white;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #141418;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		padding: 30rpx 26rpx;
		.case-name {
			display: flex;
			justify-content: space-between;
		}
	}
	.tip-type {
		margin-top: 20rpx;
		height: 94rpx;
		line-height: 94rpx;
		background: #ffffff;
		border-bottom: 1px solid #e7eaf0;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #141418;
		padding: 0 77rpx 0 26rpx;
		display: flex;
		justify-content: space-between;
		position: relative;

		.icon {
			position: absolute;
			top: 50%;
			right: 26rpx;
			transform: translateY(-50%);
		}
		.input-box {
			width: 77%;
			height: 94rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}
	.input-content-box {
		width: 100%;
		background-color: white;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #141418;
		padding: 20rpx 26rpx;
		border-bottom: 1px solid #e7eaf0;
		.title {
			height: 74rpx;
			line-height: 74rpx;
		}
		.upload-box {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin-bottom: 20rpx;
			.file-list {
				margin-bottom: 20rpx;
				margin-right: 23rpx;
				position: relative;
				.icon-box {
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					background-color: #ef0000;
					position: absolute;
					top: -13rpx;
					right: -13rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			.add-file {
				width: 116rpx;
				height: 116rpx;
				border: 1rpx solid #ccc;
				display: flex;
				align-items: center;
				justify-content: center;
				// line-height: 116rpx;
				// text-align: center;
				// border: 1px solid $u-text-color;
				// color: $u-text-color;
				margin-bottom: 20rpx;
			}
		}
		.file-list-box {
			height: 50rpx;
			line-height: 50rpx;
			color: #00c9b1;
			margin-bottom: 10rpx;
		}
		.upload-file {
			width: 100%;
			height: 74rpx;
			line-height: 74rpx;
			text-align: center;
			border: 1px solid #00c9b1;
			color: #00c9b1;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
		}
	}
}
</style>
